import { useState } from 'react'
import Navbar from '../../compoents/Navbar'
import NameCard from '../../compoents/NameCard'
import { useNavigate } from 'react-router-dom'
import style from './index.module.css'
import { FilterOutline } from 'antd-mobile-icons'
import { Toast } from 'antd-mobile'
function Index() {
  const navigate = useNavigate()
  const [selectedReports, setSelectedReports] = useState<number[]>([])

  // 报告数据
  const reports = [
    {
      id: 1,
      title: "双肾及肾血管彩色多普勒",
      type: "检查",
      typeColor: "#FF8C00",
      reportTime: "2020-01-01 10:20:36",
      selected: true
    },
    {
      id: 2,
      title: "上腹部CT平扫",
      type: "检查", 
      typeColor: "#FF8C00",
      reportTime: "2020-01-01 10:20:36",
      selected: true
    },
    {
      id: 3,
      title: "血常规",
      type: "检验",
      typeColor: "#FF4D4F", 
      reportTime: "2020-01-01 10:20:36",
      selected: true
    }
  ]

  // 切换报告选择状态
  const toggleReport = (id: number) => {
    setSelectedReports(prev => 
      prev.includes(id) 
        ? prev.filter(reportId => reportId !== id)
        : [...prev, id]
    )
  }

  // 开始申请
  const handleApply = () => {
    console.log('开始申请，选中的报告:', selectedReports)
    // 这里可以添加申请逻辑
    if(selectedReports.length === 0){
      Toast.show({ content: "请选择报告" });return;
    }
    navigate('/GetMsg',{state:{reports}})
  }

  return (
    <div className={style.container}>
      <Navbar 
        title="门诊报告申请" 
        showBack 
        onBack={() => navigate(-1)}
      />
      <div className={style.content}>
        {/* 患者信息 */}
      <NameCard />
      
      {/* 报告列表标题和筛选 */}
      <div className={style.sectionHeader}>
        <h3 className={style.sectionTitle}>门诊报告单列表</h3>
        <div className={style.filterBtn}>
          <span className={style.filterIcon}><FilterOutline /></span>
          <span>筛选</span>
        </div>
      </div>
      
      {/* 报告列表 */}
      <div className={style.reportsList}>
        {reports.map((report) => (
          <div 
            key={report.id} 
            className={`${style.reportCard} ${selectedReports.includes(report.id) ? style.selected : ''}`}
            onClick={() => toggleReport(report.id)}
          >
            <div className={style.reportLeft}>
              <div className={style.reportTitleRow}>
                <div className={style.reportTitle}>{report.title}</div>
                <span 
                  className={style.reportType}
                  style={{ backgroundColor: report.typeColor }}
                >
                  {report.type}
                </span>
              </div>
              <div className={style.reportTime}>报告时间: {report.reportTime}</div>
            </div>

            <div className={style.reportRight}>
              <div className={`${style.checkbox} ${selectedReports.includes(report.id) ? style.checked : ''}`}>
                {selectedReports.includes(report.id) && <span className={style.checkmark}>✓</span>}
              </div>
            </div>
          </div>
        ))}
      </div>
      </div>
      
      
      {/* 底部固定按钮 */}
      <div className={style.bottomButton}>
        <button className={style.applyButton} onClick={()=>handleApply(reports)}>
          开始申请
        </button>
      </div>
    </div>
  )
}

export default Index
